<template>
  <div class="container" :key="detailItem">
    <img :src="this.list.headImgSrc" alt="" class="head-image">
    <div class="author-date">
      <img :src="this.list.avatar" alt="" class="avatar">
      <span class="author">{{this.list.author}}</span>
      <span class="const-text">发表于</span>
      <span class="date">{{this.list.dateTime}}</span>
    </div>
    <span class="title">{{this.list.title}}</span>
    <div class="tool">
      <div class="circle-img">
        <span class="iconfont tool-img" :class="{collected: this.isCollected}" @click="collecToggle">&#xe814;</span>
        <span class="iconfont tool-img">&#xe86f;</span>
      </div>
    </div>
    <div class="horizon"></div>
    <div class="detail">{{this.list.detail}}</div>
    <div class="detail-dialog" :class="{showDialog: this.showDialog}">
      <detail-dialog :alertInfo="alertInfo"></detail-dialog>
    </div>
  </div>
</template>

<script>
import DetailDialog from './Dialog'
export default {
  name: 'Detail',
  components: {
    DetailDialog
  },
  data () {
    return {
      list: Array,
      detailItem: 0,
      isCollected: false,
      showDialog: false,
      isCollecteds: {},
      alertInfo: ''
    }
  },
  methods: {
    collecToggle () {
      this.isCollected = !this.isCollected
      this.alertInfo = this.isCollected ? '收藏成功' : '取消成功'
      this.isCollecteds[this.detailItem] = this.isCollected
      this.showDialogToggle()
      localStorage.setItem('collecteds', JSON.stringify(this.isCollecteds))
    },
    showDialogToggle () {
      this.showDialog = true
      setTimeout(() => {
        this.showDialog = false
      }, 1000)
    }
  },
  mounted () {
    this.list = this.$route.query.detailInfo
    this.detailItem = this.list.postId
    if (localStorage.getItem('collecteds')) {
      this.isCollecteds = JSON.parse(localStorage.getItem('collecteds'))
      this.isCollected = this.isCollecteds[this.detailItem]
    }
  },
  watch: {
    $route (to, from) {
      if (to.name === 'Detail') {
        this.list = to.query.detailInfo
        this.detailItem = this.list.postId
        if (localStorage.getItem('collecteds')) {
          this.isCollected = this.isCollecteds[this.detailItem]
          this.isCollecteds = JSON.parse(localStorage.getItem('collecteds'))
        }
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import "~styles/variable"
  .container
    .head-image
      width: 100%
    .author-date
      display: flex
      align-items: center
      margin: .1rem
      color: #666
      .avatar
        width:.8rem
        height: .8rem
      .author
        color: $color-text
        font-size: .4rem
        margin: 0 .2rem
      .const-text
        font-size: .3rem
      .date
        margin-left: .1rem
        font-size: .3rem
    .title
      color: #333
      font-size: .5rem
      font-weight: bold
      display: inline-block
      margin: 0 0 .2rem .3rem
    .tool
      display: flex
      justify-content: flex-end
      align-items: center
      margin: .2rem
      .circle-img
        margin-right: .2rem
        .tool-img
          font-size: .6rem
          border-radius: .6rem
          padding: .2rem
          color: #ddd
          background-color: #ccc
        .collected
          color: #fff
          background-color: #007aff
    .horizon
      height: 1px
      width: 90%
      background: #ddd
      position: relative
      top: -.5rem
      z-index: -99
      margin: 0 .4rem
    .detail
      color: #666
      margin: .3rem
      font-size: .4rem
      line-height: .4rem
      letter-spacing: .1rem
    .detail-dialog
      display: none
      position: fixed
      width: 100%
      top: 6rem
      left: 1.8rem
    .showDialog
      display: block
</style>
